<template>
  <div class="hp100">
    <DataOverview class="h220" />
    <div class="echarts_parent flb mt15 h330 wp100">
      <div class="echarts hp100 wp50">
        <div class="flex_space_between echarts_header h32">
          <span>销售额</span>
          <div class="flr">
            <el-select v-model="saleTrendType" size="small" class="pub_select mr16" @change="type => filterDimension(type, 'saleTrendDateRange')">
              <el-option v-for="item in $staticData.timeDimension" :key="item.key" :label="item.label" :value="item.key"> </el-option>
            </el-select>
            <el-date-picker v-if="saleTrendType === '1'" v-model="saleTrendDateRange" :picker-options="pickerOptions" size="small" unlink-panels type="daterange" class="pub_date_picker" :clearable="false" @change="time => changeSaleTrend(time, '1')" />
            <el-date-picker v-else-if="saleTrendType === '2'" v-model="saleTrendDateRange" :picker-options="pickerOptions1" size="small" unlink-panels type="monthrange" class="pub_date_picker" :clearable="false" @change="time => changeSaleTrend(time, '2')" />
            <el-date-picker v-else-if="saleTrendType === '3'" v-model="saleTrendDateRange" :picker-options="pickerOptions2" size="small" unlink-panels type="monthrange" class="pub_date_picker" :clearable="false" @change="time => changeSaleTrend(time, '2')" />
          </div>
        </div>
        <ContentCountAnalysis v-show="saleTrendDataHasZero == false" ref="contentCountAnalysisRef" class="hc32 wp100" :echarts-data="saleTrendData" />
        <PageEmptyData v-if="saleTrendDataHasZero == true" :text="'暂无数据'" />
      </div>
      <div class="echarts hp100 wp50">
        <div class="flex_space_between echarts_header h32">
          <span>订单</span>
          <div class="flr">
            <el-select v-model="saleCountTrendType" size="small" class="pub_select mr16" @change="type => filterDimension(type, 'salesCountTrendDateRange')">
              <el-option v-for="item in $staticData.timeDimension" :key="item.key" :label="item.label" :value="item.key"> </el-option>
            </el-select>
            <el-date-picker v-if="saleCountTrendType === '1'" v-model="salesCountTrendDateRange" :picker-options="pickerOptions" size="small" unlink-panels type="daterange" class="pub_date_picker" :clearable="false" @change="time => changeSalesCountTrend(time, '1')" />
            <el-date-picker v-else-if="saleCountTrendType === '2'" v-model="salesCountTrendDateRange" :picker-options="pickerOptions1" size="small" unlink-panels type="monthrange" class="pub_date_picker" :clearable="false" @change="time => changeSalesCountTrend(time, '2')" />
            <el-date-picker v-else-if="saleCountTrendType === '3'" v-model="salesCountTrendDateRange" :picker-options="pickerOptions2" size="small" unlink-panels type="monthrange" class="pub_date_picker" :clearable="false" @change="time => changeSalesCountTrend(time, '2')" />
          </div>
        </div>
        <SaleTrend v-show="salesCountTrendDataHasZero == false" ref="saleTrendRef" class="hc32 wp100" :echarts-data="salesCountTrendData" />
        <PageEmptyData v-if="salesCountTrendDataHasZero == true" :text="'暂无数据'" />
      </div>
    </div>
    <div class="bWH mt15 wp100 p16 br20 tableBox">
      <!-- ====== 表格上方的筛选条件 start ======-->
      <div class="table_filter flex_space_between h32">
        <div class="flex_start ">
          <div class="table_filter_search">
            <el-input v-model="orderParams.commonSearch" class="pub_input pub_input_search" placeholder="搜索" clearable @keydown.enter.native="filterCommit" @clear="filterCommit">
              <img slot="prefix" src="@/assets/img/orderManagement/search.png" class="pub_imgSize16" />
            </el-input>
          </div>
          <div class="ml8">
            <el-button type="text" class="high_filter_btn pub_button " :class="isShowFilter ? 'pub_buttonGreen' : ''" @click="isShowFilter = !isShowFilter">
              <img v-if="!isShowFilter" src="@/assets/img/orderManagement/high_filter.png" alt="高级筛选" />
              <img v-else src="@/assets/img/orderManagement/high_filterFFF.png" alt="高级筛选" />
              <span class="ml5">高级筛选</span>
            </el-button>
          </div>
          <div v-if="!isShowFilter" class="ml8">
            <el-button type="text" class="public_confirm_btn pub_button" @click="filterCommit"> 搜索 </el-button>
          </div>
        </div>
        <div class="flex_end">
          <div>
            <el-button type="text" class="w108 pub_button pub_buttonGreen" @click="addOrderBtn">
              <img src="@/assets/img/orderManagement/add.png" alt="新增订单" />
              <span class="ml5">新增订单</span>
            </el-button>
          </div>
          <div class="ml12">
            <el-button v-if="roleType != 3" type="text" class="w108 pub_button pub_buttonRed" @click="delteDataBtn">
              <img src="@/assets/img/orderManagement/delete.png" alt="批量删除" />
              <span class="ml5">批量删除</span>
            </el-button>
          </div>
        </div>
      </div>
      <div v-if="isShowFilter" class="flex_start mt10 h100">
        <el-form ref="ruleForm" label-width="5rem" class="addOrder">
          <el-form-item label="开始日期">
            <el-date-picker v-model="orderParams.startTime" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" class="pub_date_picker" />
          </el-form-item>
          <el-form-item label="结束日期">
            <el-date-picker v-model="orderParams.endTime" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" class="pub_date_picker" />
          </el-form-item>
          <el-form-item label="出货总价">
            <div class="flb">
              <el-input v-model="orderParams.customerTotalPriceStart" placeholder="最小值" class="pub_input" />
              <div class="ml10 mr10">-</div>
              <el-input v-model="orderParams.customerTotalPriceEnd" placeholder="最大值" class="pub_input" />
            </div>
          </el-form-item>
          <el-form-item label="出货数量">
            <div class="flb">
              <el-input v-model="orderParams.qtyStart" placeholder="最小值" class="pub_input" />
              <div class="ml10 mr10">-</div>
              <el-input v-model="orderParams.qtyEnd" placeholder="最大值" class="pub_input" />
            </div>
          </el-form-item>
          <el-form-item label="销售员">
            <el-input v-model="orderParams.companySaleName" placeholder="搜索销售员" class="pub_input" />
          </el-form-item>
          <el-form-item label="采购人">
            <el-input v-model="orderParams.customerPurchaserName" placeholder="搜索采购人" class="pub_input" />
          </el-form-item>
          <el-form-item label="品牌">
            <el-input v-model="orderParams.productBrandName" placeholder="搜索品牌" class="pub_input" />
          </el-form-item>
          <el-form-item label="货号">
            <el-input v-model="orderParams.productBrandArticleNo" placeholder="搜索货号" class="pub_input" />
          </el-form-item>
          <el-form-item label="产品名称">
            <el-input v-model="orderParams.productBrandArticleNoName" placeholder="搜索采产品名称" class="pub_input" :maxlength="500" />
          </el-form-item>
          <el-form-item label="供应商">
            <el-input v-model="orderParams.productSupplierName" placeholder="搜索供应商" class="pub_input" />
          </el-form-item>
          <el-form-item class="search_btn" label-width="1.25rem">
            <el-button type="text" class="public_confirm_btn pub_button" @click="filterCommit"> 搜索 </el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- ====== 表格上方的筛选条件 end ======-->
      <el-table ref="multipleTable" size="mini" :data="tableData" border tooltip-effect="dark" class="wp100" :class="[isShowFilter ? '' : 'mt12']" :height="`${536 * $f}px`" @selection-change="handleSelectionChange">
        <el-table-column type="selection" align="center" :width="`${50 * $f}`" />
        <el-table-column prop="id" label="订单号" show-overflow-tooltip :min-width="`${150 * $f}`" align="center" />
        <el-table-column prop="dateInput" label="订单日期" show-overflow-tooltip :min-width="`${100 * $f}`" align="center" />
        <el-table-column prop="companySaleName" label="销售员" show-overflow-tooltip :min-width="`${100 * $f}`" align="center" />
        <el-table-column prop="customerPurchaserName" label="采购人" :min-width="`${100 * $f}`" align="center" />
        <el-table-column prop="productBrandName" label="品牌" show-overflow-tooltip :min-width="`${100 * $f}`" align="center" />
        <el-table-column prop="productBrandArticleNo" label="货号" show-overflow-tooltip :min-width="`${150 * $f}`" align="center" />
        <el-table-column prop="productBrandArticleNoName" label="产品名称" show-overflow-tooltip :min-width="`${300 * $f}`" align="center" />
        <el-table-column label="规格" show-overflow-tooltip prop="productSpecificationName" :min-width="`${200 * $f}`" align="center" />
        <el-table-column prop="qty" label="订单数量" show-overflow-tooltip :min-width="`${120 * $f}`" align="center">
          <template slot-scope="{ row }">
            <div>{{ Number(row.qty).toFixed(0) }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="customerSinglePrice" label="出货单价" show-overflow-tooltip :min-width="`${150 * $f}`" align="center" />
        <el-table-column prop="customerTotalPrice" label="出货总价" show-overflow-tooltip :min-width="`${150 * $f}`" align="center" />
        <el-table-column prop="purchaseSinglePrice" label="进货单价" show-overflow-tooltip :min-width="`${150 * $f}`" align="center" />
        <el-table-column prop="purchaseTotalPrice" label="进货总价" show-overflow-tooltip :min-width="`${150 * $f}`" align="center" />
        <el-table-column prop="productSupplierName" label="供应商" show-overflow-tooltip :min-width="`${150 * $f}`" align="center" />
        <el-table-column prop="taxCode" label="税收编码" show-overflow-tooltip :min-width="`${255 * $f}`" align="center" />
        <el-table-column prop="remark" label="备注" show-overflow-tooltip :min-width="`${300 * $f}`" align="center" />
        <el-table-column label="操作" :width="`${150 * $f}`" align="center" fixed="right">
          <template slot-scope="{ row }">
            <el-button class="pub_button public_1EB398_btn" type="text" size="mini" @click="goPage('layout/orderInfo', 3, row)">详情</el-button>
            <el-button v-if="roleType != 3" type="text" class="pub_button public_1EB398_btn" size="mini" @click="goPage('layout/orderInfo', 2, row)">编辑</el-button>
            <el-button v-if="roleType != 3" type="text" class="pub_button public_F16363_btn" size="mini" @click="delBtnClick(row)">删除</el-button>
          </template>
        </el-table-column>
        <template slot="empty">
          <PageEmptyData />
        </template>
      </el-table>
      <div class="pub_pageination flex_center mt10 h32">
        <el-pagination background layout="total,prev, pager, next,sizes" :page-size="orderParams.pageSize" :current-page.sync="orderParams.pageNum" :total="orderParams.total" @current-change="orderChangePage" @size-change="orderChangeSize"> </el-pagination>
      </div>
    </div>
    <!-- 导入弹窗 -->
    <PageDialog :title="'导入'" :dialog-visible="importDialogVisible" :width="`${$f * 600}px`" @close="closeDialog">
      <el-upload ref="upload" class="pub_upload" drag :data="{ file: fileList }" :action="uploadFileUrl" :on-success="uploadFileSucess" :auto-upload="false" :limit="1" :headers="headers" :file-list="fileList" :on-remove="handleRemoveFile" :on-change="changeUploadFile">
        <img src="@/assets/img/orderManagement/import.png" alt="导入" class="pub_imgSize30 mt20 mb10" />
        <div v-show="isSelectedFile === false">
          <div class="pub_importFile_tip">将文件拖到此处，或<em class="ml5">点击上传</em></div>
          <div class="pub_importFile_tip mt10">仅支持Word、Excel</div>
        </div>
        <div v-show="isSelectedFile === true">
          <div class="pub_importFile_tip mb10">已导入<span class="pub_importFile_name">营业执照.jpg</span>（11.9KB）</div>
          <el-button type="text" class="w108 pub_button public_cancel_btn" @click.stop="isSelectedFile = false">
            <span class="ml5">重新选择</span>
          </el-button>
        </div>
      </el-upload>
    </PageDialog>
    <!-- 导出提示 -->
    <PageDialog :title="'导入'" :dialog-visible="exporttDialogVisible" :width="`${$f * 600}px`" @close="closeDialog">
      <div class="pub_tips">
        将导出Excel表格，请确认是否导出？
      </div>
    </PageDialog>
    <!-- 删除提示 -->
    <deleteDialog :multiple-selection="multipleSelection" :visible="deleteDialogVisible" @close="closeDialog" @submit="confirmDelete" />
  </div>
</template>
<script>
import DataOverview from './components/DataOverview.vue';
import ContentCountAnalysis from './components/ContentCountAnalysis.vue';
import SaleTrend from './components/SaleTrend.vue';
import PageDialog from '@/components/PageDialog/index.vue';
import tableFun from '@/mixin/tableFun.js';
import dayjs from 'dayjs'; // ES 2015
export default {
  components: { SaleTrend, DataOverview, ContentCountAnalysis, PageDialog },
  mixins: [tableFun],
  data() {
    return {
      params: {
        startTime: '',
        text: '',
        status: '全部状态'
      },
      saleTrendType: '1',
      saleTrendDateRange: [], //销售额趋势数据
      saleTrendDataHasZero: false, //销售额趋势数据是不是全部等于0
      saleTrendData: {},
      maxHeight: '160px',
      saleCountTrendType: '1',
      salesCountTrendDateRange: [], //销量趋势数据
      salesCountTrendData: {},
      salesCountTrendDataHasZero: false, //销量趋势数据是不是全部等于0
      pagePath: null, //页面路径
      addOrderParams: {
        //新增订单参数
        orderNo: '', //单号
        brand: '', //品牌
        itemNumber: '', //货号
        specs: '', //规格
        placeOrder: '', //下单
        price: '', //单价
        count: '', //数量
        totalPrice: '', //总价
        purchaseSinglePrice: '', //进货单价
        cost: '', //成本
        ticketEntry: '0', //进票 默认否
        ticketOut: '0' //出票 默认否
      },
      // ====== 上传文件的参数 start ======
      importDialogVisible: false, //导入弹窗
      fileList: [], //导入的文件
      uploadFileUrl: '', //上传文件接口路径
      isSelectedFile: true,
      // ====== 上传文件的参数 end ======
      exporttDialogVisible: false, //导出弹窗
      statisticsParams: {
        //统计概览数据
        dimension: '1', //维度  "1"-日   "2"-月   "3"-季度    "4"-年
        startDate: '',
        endDate: ''
      },
      tableData: [], //订单数据
      orderParams: {
        commonSearch: '',
        total: 0,
        pageSize: 10,
        pageNum: 1
      },
      isShowFilter: false //是否显示高级搜索
    };
  },
  computed: {
    headers() {
      return {
        token: window.localStorage.getItem('token')
      };
    },
    roleType() {
      //1:超级管理员 2:普通管理员 3:普通员工
      return this.$store.state?.userInfo?.roleType;
    }
  },
  watch: {
    $route(to, from) {
      // to: 即将进入的目标路由对象
      // from: 当前导航正要离开的路由
      this.pagePath = to.path;
    }
  },
  created() {
    this.pagePath = this.$route.path;
    this.getOrderDataList(); //获取订单列表
    this.initData(); //初始化数据
  },
  methods: {
    //初始化数据
    initData() {
      const today = dayjs().format('YYYY-MM-DD');
      const last = dayjs()
        .subtract(30, 'day')
        .format('YYYY-MM-DD');
      this.saleTrendDateRange = [last, today];
      this.salesCountTrendDateRange = [last, today];
      this.changeSaleTrend(this.saleTrendDateRange, '1'); //销售额趋势
      this.changeSalesCountTrend(this.salesCountTrendDateRange, '1'); //销量趋势
    },
    async addOrderBtn() {
      let req = await this.$api.get(this.$url.queryUserInfo);
      if (req.code == 200) {
        this.$store.commit('setUserInfo', { ...req.data, roleType: this.$store.state?.userInfo?.roleType });
        if (req.data.subscribeStatus === '1') {
          window.sessionStorage.clear();
          this.goPage('layout/orderInfo', 1);
        } else {
          this.$bus.$emit('openVipDialog');
        }
      }
    },
    getDateRange(startDate, endDate, format, unit) {
      const dates = [];
      if (unit === 'day') {
        let current = dayjs(startDate);
        const end = dayjs(endDate);
        while (current.isBefore(end) || current.isSame(end)) {
          dates.push(current.format(format));
          current = current.add(1, unit);
        }
      } else if (unit === 'Month') {
        let current = dayjs(startDate + '-01', 'YYYY-MM-DD');
        const end = dayjs(endDate + '-01', 'YYYY-MM-DD');
        while (current.isBefore(end) || current.isSame(end, 'month')) {
          dates.push(current.format('YYYY-MM'));
          current = current.add(1, 'month');
        }
      } else {
        let current = startDate;
        const end = endDate;
        while (current < end) {
          dates.push(current);
          current = current + 1;
        }
      }
      return dates;
    },
    //选择维度（日、月、季度、年）
    filterDimension(type, name) {
      if (type === '1') {
        const today = dayjs().format('YYYY-MM-DD');
        const last = dayjs()
          .subtract(30, 'day')
          .format('YYYY-MM-DD');
        this[name] = [last, today];
      } else if (type === '2') {
        const today = dayjs().format('YYYY-MM');
        const last = dayjs()
          .subtract(12, 'month')
          .format('YYYY-MM');
        this[name] = [last, today];
      } else {
        const today = dayjs().format('YYYY');
        const last = dayjs()
          .subtract(1, 'year')
          .format('YYYY');
        this[name] = [last, today];
      }
    },
    //销售额趋势
    async changeSaleTrend(time, type) {
      let params = {};
      let timeFormate;
      let timeType;
      if (type === '1') {
        params = { startDate: dayjs(time[0]).format('YYYY-MM-DD'), endDate: dayjs(time[1]).format('YYYY-MM-DD') };
        timeFormate = 'YYYY-MM-DD';
        timeType = 'day';
      } else if (type === '2') {
        params = { startMonth: dayjs(time[0]).format('YYYY-MM'), endMonth: dayjs(time[1]).format('YYYY-MM') };
        timeFormate = 'YYYY-MM';
        timeType = 'Month';
      } else {
        params = { starYear: dayjs(time[0]).format('YYYY'), endYear: dayjs(time[1]).format('YYYY') };
        timeFormate = 'YYYY';
        timeType = 'Year';
      }
      let res = await this.$api.post(this.$url.statisticsSaleAmountTrend, params);
      if (res.code == 200) {
        let times = this.getDateRange(params[`start${type === '1' ? 'Date' : timeType}`], params[`end${type === '1' ? 'Date' : timeType}`], timeFormate, timeType);
        let xData = [];
        let sData = [];
        times.forEach(el => {
          let idx = res.data.findIndex(son => el === son.date);
          xData.push(el);
          if (idx === -1) {
            sData.push(0);
          } else {
            sData.push(res.data[idx].data);
          }
        });
        this.saleTrendDataHasZero = sData.every(el => el === 0);
        this.saleTrendData = { xData, sData };
        console.log(this.saleTrendData, 'saleTrendData');
        console.log(this.saleTrendDataHasZero, 'saleTrendDataHasZero');
      }
    },
    //销量趋势
    async changeSalesCountTrend(time, type) {
      let params = {};
      let timeFormate;
      let timeType;
      if (type === '1') {
        params = { startDate: dayjs(time[0]).format('YYYY-MM-DD'), endDate: dayjs(time[1]).format('YYYY-MM-DD') };
        timeFormate = 'YYYY-MM-DD';
        timeType = 'day';
      } else if (type === '2') {
        params = { startMonth: dayjs(time[0]).format('YYYY-MM'), endMonth: dayjs(time[1]).format('YYYY-MM') };
        timeFormate = 'YYYY-MM';
        timeType = 'Month';
      } else {
        params = { starYear: dayjs(time[0]).format('YYYY'), endYear: dayjs(time[1]).format('YYYY') };
        timeFormate = 'YYYY';
        timeType = 'Year';
      }
      let res = await this.$api.post(this.$url.statisticsSaleQtyTrend, params);
      if (res.code == 200) {
        let times = this.getDateRange(params[`start${type === '1' ? 'Date' : timeType}`], params[`end${type === '1' ? 'Date' : timeType}`], timeFormate, timeType);
        let xData = [];
        let sData = [];
        times.forEach(el => {
          let idx = res.data.findIndex(son => el === son.date);
          xData.push(el);
          if (idx === -1) {
            sData.push(0);
          } else {
            sData.push(res.data[idx].data);
          }
        });
        this.salesCountTrendDataHasZero = sData.every(el => el === 0);
        this.salesCountTrendData = { xData, sData };
      }
    },
    //确认删除
    async confirmDelete() {
      let res = null;
      let idArr = [];
      if (this.multipleSelection.length > 0 && this.selectedRow === null) {
        idArr = this.multipleSelection.map(val => val.id);
      } else {
        idArr = [this.selectedRow.id];
      }
      res = await this.$api.post(this.$url.saleOrderDelete, { saleOrderIds: idArr });
      this.closeDialog();
      if (res.code === 200) {
        this.$message.success('删除成功');
        window.location.reload();
      } else {
        this.$message.success('删除失败');
      }
    },
    //获取订单列表
    async getOrderDataList() {
      let res = await this.$api.get(this.$url.saleOrderList, this.orderParams);
      this.tableData = res.rows;
      this.orderParams.total = res.total;
    },
    //修改页码
    orderChangePage(pageNum) {
      this.orderParams.pageNum = pageNum;
      this.getOrderDataList();
    },
    //修改每页显示的条数
    orderChangeSize(size) {
      this.orderParams.pageSize = size;
      this.orderParams.pageNum = 1;
      this.getOrderDataList();
    },
    //页面跳转
    goPage(pageUrl, sourceType, row) {
      window.sessionStorage.clear();
      if (sourceType != 1) {
        window.sessionStorage.setItem('orderInfo', JSON.stringify(row));
      }
      this.$router.push({ path: '/' + pageUrl, query: { activeIndex: '1', sourceType } });
    },
    //关闭弹窗
    closeDialog() {
      this.deleteDialogVisible = false;
      this.exporttDialogVisible = false;
      this.importDialogVisible = false;
      this.addOrderParams = Object.assign({}, this.$options.data()); //重置参数
    },
    //显示关闭弹窗
    showDilogBtn(field) {
      this[field] = !this[field];
    },
    delteDataBtn() {
      if (this.multipleSelection.length === 0) {
        return this.$message.warning('请选择需要删除的数据');
      }
      this.showDilogBtn('deleteDialogVisible');
    },
    // ====== 上传文件的方法 start ======
    //上传文件成功
    uploadFileSucess() {},
    //删除文件时出发此方法
    handleRemoveFile(file, fileList) {
      this.fileList = fileList;
    },
    //文件状态改变触发此方法
    changeUploadFile(file, fileList) {
      this.fileList = fileList;
    },
    //确认上传文件
    confirmUpload() {
      if (this.fileList.length == 0) {
        this.$message.warning('请上传文件');
      } else {
        this.$refs.upload.submit(); //上传文件
      }
    },
    // ====== 上传文件的方法 enf ======
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    //搜索
    filterCommit() {
      this.orderParams = { ...this.orderParams, pageSize: 10, pageNum: 1 };
      delete this.orderParams.commonSearch;
      this.getOrderDataList();
    }
  }
};
</script>
<style lang="less" scoped>
.pub_select {
  width: 80px;
}
.tableBox {
  min-height: calc(100% - 80px);
}
.echarts_parent {
  width: 100%;
  overflow: hidden;
  .echarts {
    background: #ffffff;
    border-radius: 16px 16px 16px 16px;
    padding: 20px;
    box-sizing: border-box;
  }
  .echarts {
    float: left;
    & + .echarts {
      margin-left: 16px;
    }
    .echarts_header {
      font-size: 16px;
      color: #0a0b0d;
    }
  }
  .table_content {
    width: 100%;
  }
  .table_filter_search {
    width: 200px;
  }
  .table_filter_select {
    width: 150px;
  }
  .high_filter_btn {
    width: 108px;
  }
}
.addOrder {
  .el-form-item {
    float: left;
    width: 309px;
    margin-bottom: 10px;
    &.search_btn {
      width: auto;
    }
  }
  ::v-deep .pub_date_picker.el-date-editor.el-input {
    width: 229px;
  }
}
</style>
